<style>
  .flex-container {
    display: flex;
    align-items: center;
    position: relative;
  }

  .flex-container input {
    width: 140px;
    height: 34px;
    text-indent: 8px;
    color: #333;
  }

  .flex-container p{
    color: #cfcfcf;
    font-size: 12px;
    margin-bottom: 6px;
  }

  .entry-style {
    box-shadow: 0px 0px 4px 0px rgba(214, 214, 214, 0.75);
    border-radius: 6px;
    border: 1px solid rgba(229, 229, 229, 1);
  }

  .head-container {
    padding: 10px 0px 14px;
    border-bottom: 1px solid #E3E3E5;
  }

  .color-cfcfcf {
    color: #cfcfcf;
  }

  .search-text {
    background: rgba(249, 249, 249, 1);
    height: 34px;
    position: relative;
    width: 220px;
    border-radius: 4px;
  }

  .search-text span {
    position: absolute;
    left: 8px;
    top: 0;
    line-height: 34px;
  }

  .search-text input {
    width: 100%;
    height: 100%;
    background: none;
    border: 0;
    outline: medium;
    text-indent: 25px;
  }

  .global_ipt_text {
    width: 220px;
  }

  input {
    border: none;
    outline: none;
  }

  .calendar-text {
    background: rgba(249, 249, 249, 1);
    width: 140px;
    height: 34px;
    border-radius: 4px;
  }

  .calendar-text .hl-date-text {
    background: none;
    box-shadow: none;
    border: 0;
  }

  .house-sharing-text span {
    background: rgba(249, 249, 249, 1);
    box-shadow: none;
    border: 0;
    color: #666;
  }

  .newAdd .house-sharing-text span {
    box-shadow: 0px 0px 4px 0px rgba(214, 214, 214, 0.75);
    border-radius: 6px;
    border: 1px solid rgba(229, 229, 229, 1);
  }

  .show-hide-term {
    width: 59px;
    height: 30px;
    line-height: 30px;
    color: rgba(244, 174, 71, 1);
    margin: 20px 0 0 35px;
    background: rgba(244, 174, 71, 0.3);
    border-radius: 4px;
    text-align: right;
    padding-right: 5px;
    position: absolute;
    right: 0;
    top: 0
  }

  .mark-yuce {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .yuce-contains {
    width: 615px;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
  }

  .yuce-contains .title {
    line-height: 45px;
    text-align: center;
    height: 45px;
  }

  .yuce-contains .close {
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
  }

  .yuce-orge {
    background-color: #f2f2f2;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .orge-footer {
    padding: 8px 0;
  }

  .select-yuce {
    position: absolute;
    right: 141px;
    top: 0;
    width: 120px;
  }

  .footer-template {
    position: fixed;
    bottom: 10px;
  }

  .center-dy {
    justify-content: center;
    align-items: center;
  }

  .pos-center {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    text-align: center;
  }

  .detection {
    width: 160px;
    height: 46px;
    line-height: 46px;
    border-radius: 23px;
    margin: 20px 0;
    display: block;
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px rgba(224, 228, 255, 1);
  }

  .title-S {
    display: inline-block;
    width: 70px;
  }

  textarea {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 4px 0px rgba(214, 214, 214, 0.75);
    border-radius: 6px;
    border: 1px solid rgba(229, 229, 229, 1);
    padding: 8px;
    color: #333;
  }

  .unit-text {
    position: absolute;
    top: 7px;
    right: -18px;
  }

  .block {
    width: 700px;
    height: 1px;
    background: rgba(232, 232, 232, 1);
    margin-top: 10px;
  }

  .feedback-ok {
    margin: 30px 0 20px 0;
    color: #476799;
    cursor: pointer;
  }

  .feedback-ok span {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: #AAAAAA;
    margin: 0 5px;
  }

  .hl-date-icon::before {
    top: 0;
    right: 0;
  }
	
	.change-abs {
		position: absolute;
		width:46px;
		height:20px;
		background:rgba(240,242,255,1);
		border-radius:12px 2px 12px 2px;
		right: 0;
		top: 10px;
		line-height: 20px;
		color: rgba(109, 122, 226, 1);
		font-size: 12px;
		text-align: center;
	}
</style>

<section class="pl-24 pr-24" id="commissionManagement">
  <div class="hl-list-title">
    <h4>抽成管理</h4>
  </div>
  <!-- 搜索区 -->
  <div class="clearfix mt-15 search-container-house border-b pb-10 relative">
    <div class="flex-container">
      <div class="mr-10">
        <p>信息检索</p>
        <div class="global_search">
          <span class="icon-Gm-search"></span>
          <input v-model="keyword" autocomplete="off" type="text" class="global_ipt_text" placeholder="客户名称/简称/联系人/联系电话"
            style="width:220px" />
        </div>
      </div>
      <div class="mr-10">
        <p>截止付款日</p>
        <div class="clearfix">
          <div class="calendar-text pull-left">
            <web-calendar v-model="payment_deadline_begin" tips="起始时间"></web-calendar>
          </div>
          <div class="pull-left line-height-34 color-999 plr-12">-</div>
          <div class="calendar-text pull-left">
            <web-calendar v-model="payment_deadline_end" tips="截止时间"></web-calendar>
          </div>
        </div>
      </div>
      <div v-show="isExtenseFlag">
        <p>账单开始日<span style="margin-left:100px;">账单结束日</span></p>
        <div class="clearfix">
          <div class="calendar-text pull-left">
            <web-calendar v-model="begin_date" tips="起始时间"></web-calendar>
          </div>
          <div class="pull-left line-height-34 color-999 plr-12">-</div>
          <div class="calendar-text pull-left">
            <web-calendar v-model="end_date" tips="截止时间"></web-calendar>
          </div>
        </div>
      </div>

      <div style="padding-top:18px;" v-if="!isExtenseFlag">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="flex-container" v-show="isExtenseFlag" style="margin-top:10px">
      <div class="mr-10">
        <p>项目 </p>
				<hl-select :data="projectList" v-model="project_id"  :width="220" @on-change="getGroupPrimaryData"></hl-select>
      </div>
      <div class="mr-10">
        <p>组合</p>
        <hl-cascader :selected="selectedGroupData" :width="220" :primary-data="groupOneData" :secondary-data="groupTwoData" :tertiary-data="groupThreeData" @on-primary-change="selectOneGroup" @on-secondary-change="selectTwoGroup" @on-tertiary-change="selectThreeGroup"></hl-cascader>
      </div>
      <div class="mr-10">
        <p>楼栋 </p>
				<hl-select :data="buildingList" v-model="building_id" width="140" @on-change="selectBuilding"></hl-select>
      </div>
      <div class="mr-10">
        <p>楼层 </p>
				<hl-select :data="floorList" v-model="floor_id" width="140" @on-change="selectFloor"></hl-select>
      </div>
      <div class="mr-10">
        <p>单元 </p>
				<hl-select :data="unitList" v-model="unit_id" width="140" @on-change="selectUnit"></hl-select>
      </div>
    </div>
    <div class="flex-container" v-show="isExtenseFlag" style="margin-top:10px">
      <div style="padding-top:18px;">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="global_open_sign" @click="openSearch">
      <span v-if="!isExtenseFlag">更多筛选项</span>
      <span v-if="isExtenseFlag">收起筛选项</span>
    </div>
  </div>
  <!-- 筛选区 -->
  <div class="global_screening_container">
    <div class="clearfix">
      <div class="pull-left" style="margin-right: 45px;">
        <ul>
          <b class="mr-10" style="lineHeight:54px;float:left;">逾期情况</b>
          <hl-checkbox-button style="float:left" :data="billOverTypeData" v-model="selectedOverTypeCode" @on-click="selectBillMenu" merge></hl-checkbox-button>
        </ul>
      </div>
      <div class="pull-left">
        <ul>
          <b class="mr-10" style="lineHeight:54px;float:left;">处理状态</b>
          <hl-checkbox-button style="float:left" :data="billStateData" v-model="selectedBillStateCode" @on-click="selectBillMenu" merge></hl-checkbox-button>
        </ul>
      </div>
    </div>

    <span class="global_refresh_icon icon-uniE94B" @click="resetStatus"></span>
  </div>


  <!--流式布局表格-->
  <section class="fixed-config-table-container global_table" style="border:1px solid #E5E5E5;margin: 0;"
    @mouseenter="showScroll" @mouseleave="hideScroll">
    <!-- 内容表格 -->
    <div class="fixed-config-table-wrap" :class="{'config-table-scroll':isScroll}">
      <div :style="tbTitleWidth">
        <div class="config-table-title-wrap dy-flex">
          <!-- //完整 -->
          <div style="padding:0px;" class="config-table-title-item global_table_title" v-if="configType == 'WZ'"
            @click=" sortBySTTime(item)" :class="{'dy-fx-1':item.name === '序','dy-fx-2':item.name !== '序'}"
            v-for="(item,index) in headArr">
            <span>{{ item.name }}</span>
            <span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1"
              v-for="(time,indexTime) in dateTimeUpdate"
              :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
              <span class="path1"></span><i class="path2"></i>
            </span>
          </div>
          <!-- //简单 -->
          <div style="padding:0px;" class="config-table-title-item global_table_title"
            v-if="configType == 'JD' && item.baseFlag == 'Y'" @click=" sortBySTTime(item)"
            :class="{'dy-fx-1':item.name === '序','dy-fx-2':item.name !== '序'}" v-for="(item,index) in headArr">
            <span>{{ item.name }}</span>
            <span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1"
              v-for="(time,indexTime) in dateTimeUpdate"
              :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
              <span class="path1"></span><i class="path2"></i>
            </span>
          </div>
          <!-- //配置 -->
          <div style="padding:0px;" class="config-table-title-item global_table_title"
            v-if="configType == 'PZ' && item.customShowFlag == 'Y'" @click=" sortBySTTime(item)"
            :class="{'dy-fx-1':item.name === '序','dy-fx-2':item.name !== '序'}" v-for="(item,index) in headArr">
            <span>{{ item.customDisplayName ? item.customDisplayName : item.name }}</span>
            <span v-if="dateTimeUpdate.indexOf(item.value) > -1 && indexTime < 1"
              v-for="(time,indexTime) in dateTimeUpdate"
              :class="{'icon-Gm-sort-default': isActiveCode != item.value, 'icon-Gm-sort-ascending': isActiveCode == item.value && orders == 'ASC', 'icon-Gm-sort-descending': isActiveCode == item.value && orders == 'DESC'}">
              <span class="path1"></span><i class="path2"></i>
            </span>
          </div>
        </div>

        <div class="config-table-content-wrap">
          <ul class="dy-flex global_table_item" v-for="(item,index) in listObj.commissionInfoList">
            <!-- //完整 -->
            <li class="relative" :class="{'dy-fx-1':item1.name === '序','dy-fx-2':item1.name !== '序'}" v-if="configType == 'WZ'"
              v-for="(item1,index1) in headArr">
              <span :title="item[item1.value]">{{item[item1.value] | formatUndefined}}</span>
							<span class="change-abs" v-if="item1.value == 'customerName' && item.contractAlterFlag == 'Y'">变更中</span>
            </li>
            <!-- //简单 -->
            <li class="relative" :class="{'dy-fx-1':item1.name === '序','dy-fx-2':item1.name !== '序'}"
              v-if="configType == 'JD' && item1.baseFlag == 'Y'" v-for="(item1,index1) in headArr">
              <span :title="item[item1.value]">{{item[item1.value] | formatUndefined}}</span>
							<span class="change-abs" v-if="item1.value == 'customerName' && item.contractAlterFlag == 'Y'">变更中</span>
            </li>
            <!-- //配置 -->
            <li class="relative" :class="{'dy-fx-1':item1.name === '序','dy-fx-2':item1.name !== '序'}"
              v-if="configType == 'PZ' && item1.customShowFlag == 'Y'" v-for="(item1,index1) in headArr">
              <span :title="item[item1.value]">{{item[item1.value] | formatUndefined}}</span>
							<span class="change-abs" v-if="item1.value == 'customerName' && item.contractAlterFlag == 'Y'">变更中</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 操作 -->
    <div class="config-table-operate-wrap">
      <div class="title" style="backgroundColor:#F0F2FF;height:40px;">
        <div class="name">操作</div>
        <div class="extension-wrap">
          <i class="icon-predict-more extension-icon"></i>
        </div>
        <ul class="table-type-wrap">
          <li @click="selectTableType('JD')" :class="{'active': configType == 'JD' }">简单表格</li>
          <li @click="selectTableType('WZ')" :class="{'active': configType == 'WZ' }">完整表格</li>
          <li @click="selectTableType('PZ')" :class="{'active': configType == 'PZ' }">自定义表格<span
              class="icon icon-Gm-edit" @click="showTableLayer"></span></li>
        </ul>
      </div>
      <ul class="button-group">
        <li v-for="(item,index) in listObj.commissionInfoList" class="global_table_item">
          <a @click="goTodetail(item.id)">详情</a>
        </li>
      </ul>
    </div>

  </section>
  <!-- end -->

  <!-- 自定义列表项弹出层 -->
  <div class="pop box-o-shadow config-table-layer" v-show="isShowTableLayer">
    <div class="head-pop font-16"><span>自定义列</span>
      <button class="fw-close absolute close" type="button" @click="closeTableLayer">×</button>
    </div>
    <div class="content-pop">
      <div class="content text-center">
        <ul class="title-wrap">
          <li class="dy-fx-1 text-left">名称</li>
          <li class="dy-fx-2">自定义名称</li>
          <li class="dy-fx-1">状态</li>
        </ul>
        <div class="ctx-wrap" id="sortableTable">
          <ul :class="{ 'active': item.isActive == 'Y' }" v-for="(item,index) in sortTableTitle"
            @mouseenter="showhighLightTitleItem(item,index)" @mouseleave="removehighLightTitleItem(item,index)">
            <li class="sort-sign" :class="{ 'active':item.isActive == 'Y' }">排序</li>
            <li class="dy-fx-1 name">{{item.name}}</li>
            <li class="dy-fx-2">
              <input type="text" class="form-control" v-model="item.customDisplayName">
            </li>
            <li class="dy-fx-1 ">
              <span class="show-icon "
                :class="{'icon-Nav-contract-choice':item.customShowFlag == 'Y' , 'icon-uncheck':item.customShowFlag == 'N' }"
                @click="selectedTitleItem(index)">显示</span>
              <span class="hide-icon "
                :class="{'icon-Nav-contract-choice':item.customShowFlag == 'N' , 'icon-uncheck':item.customShowFlag == 'Y' }"
                @click="cancelSelectedTitleItem(index)">隐藏</span>
            </li>
          </ul>

        </div>
      </div>
    </div>
    <div class="fw-button">
      <button type="button" class="fw-submit yes" @click="confirmSubmitTable">确定</button>
      <button type="button" class="fw-submit no" @click="closeTableLayer">取消</button>
    </div>
  </div>

  <!--遮罩-->
  <div class="backdrop" v-if="isShowTableLayer"></div>

  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{ totalCount }}</i>条记录</span>
      <span>每页<hl-select :data="pageLimits" v-model="limit" width="80" @on-change="setMoreNum"></hl-select>条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="getCommissionData"></hl-pagination>
    </div>
  </div>
</section>

<script src="modules/contract/scripts/commission_management.js" charset="utf-8"></script>
<style>
  /*Typing Loader*/

  .typing_loader {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-animation: typing 1s linear infinite alternate;
    -moz-animation: Typing 1s linear infinite alternate;
    -ms-animation: Typing 1s linear infinite alternate;
    animation: typing 1s linear infinite alternate;
    margin: 8px auto;
    position: relative;
    left: -12px;
  }

  @-webkit-keyframes typing {
    0% {
      background-color: rgba(0, 0, 0, 1);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
    }

    25% {
      background-color: rgba(0, 0, 0, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
    }

    75% {
      background-color: rgba(0, 0, 0, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 1);
    }
  }

  @-moz-keyframes typing {
    0% {
      background-color: rgba(0, 0, 0, 1);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
    }

    25% {
      background-color: rgba(0, 0, 0, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
    }

    75% {
      background-color: rgba(0, 0, 0, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 1);
    }
  }

  @keyframes typing {
    0% {
      background-color: rgba(0, 0, 0, 1);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
    }

    25% {
      background-color: rgba(0, 0, 0, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
    }

    75% {
      background-color: rgba(0, 0, 0, 0.4);
      box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 1);
    }
  }

  ::-webkit-input-placeholder {
    color: #ccc;
  }

  ::-moz-placeholder {
    color: #ccc;
  }

  :-ms-input-placeholder {
    color: #ccc;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
</style>
